<template>
    <div>
        <div class="sampleItem">
            <div class="sampleTitleBox" style="margin:0px;">
                <div class="sampleTitle">HTML部分：</div>
            </div>
            <div class="sampleContentBox">
                <div class="sampleContent" id="markdown_1">
                    
                </div>
            </div>

            <div class="sampleTitleBox" style="margin-top:50px;">
                <div class="sampleTitle">JS部分：</div>
            </div>
            <div class="sampleContentBox">  
                <div class="sampleContent" id="markdown_2">
                    
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {
                markdown_1 : [
                    '```javascript',
                    '//表单容器',
                    '<el-form :model="form" :rules="rules" label-position="right" ref="form" label-width="160px">',
                    '',
                    '   <!--单行录入示例-->',
                    '   <el-form-item label="姓名：" prop="name">',
                    '       <el-col :span="8">',
                    '           <el-input v-model="form.name" placeholder="请输入名称"></el-input>',
                    '       </el-col>',
                    '   </el-form-item>',
                    '',
                    '   <!--多行录入示例-->',
                    '   <el-form-item label="用户描述：" prop="desc">',
                    '       <el-col :span="8">',
                    '           <el-input type="textarea" v-model="form.desc" rows="5" placeholder="请输入用户描述"></el-input>',
                    '       </el-col>',
                    '   </el-form-item>',
                    '',
                    '   <!--下拉框选择示例-->',
                    '   <el-form-item label="所属类别：" prop="category">',
                    '       <el-col :span="8">',
                    '           <el-select v-model="form.category" placeholder="请选择所属类别">',
                    '               <el-option',
                    '                   v-for="item in categoryData"',
                    '                       :key="item.id"',
                    '                       :label="item.name"',
                    '                       :value="item.id">',
                    '               </el-option>',
                    '           </el-select>',
                    '       </el-col>',
                    '   </el-form-item>',
                    '',
                    '   <!--单选框示例-->',
                    '   <el-form-item label="性别：" prop="sex">',
                    '       <el-col :span="15">',
                    '           <el-radio v-model="form.sex" label="0" >男</el-radio>',
                    '           <el-radio v-model="form.sex" label="1" >女</el-radio>',
                    '       </el-col>',
                    '   </el-form-item>',
                    '',
                    '   <!--多选框示例-->',
                    '   <el-form-item label="爱好" prop="hobby">',
                    '       <el-checkbox-group v-model="form.hobby">',
                    '           <el-checkbox label="篮球"></el-checkbox>',
                    '           <el-checkbox label="足球"></el-checkbox>',
                    '           <el-checkbox label="电竞"></el-checkbox>',
                    '       </el-checkbox-group>',
                    '   </el-form-item>',
                    '',
                    '   <!--图片上传示例-->',
                    '   <el-form-item label="用户头像：" prop="headerImage">',
                    '       <el-col :span="8">',
                    '           <upload-image :preview="form.headerImage" v-on:cropperImage="cropperImageClick" v-on:uploadImageChange="uploadImageChange"></upload-image>',
                    '       </el-col>',
                    '   </el-form-item>',
                    '',
                    '   <!--富文本示例-->',
                    '   <el-form-item label="用户详情：" prop="content">',
                    '       <el-col :span="24">',
                    '           <div id="editorElement" style="text-align:left"></div>',
                    '       </el-col>',
                    '   </el-form-item>',
                    '',
                    '   <!--提交和重置按钮示例-->',
                    '   <el-form-item>',
                    '       <el-button type="primary" @click="submitForm("form")">提交</el-button>',
                    '       <el-button @click="resetForm">重置</el-button>',
                    '   </el-form-item>',
                    '',
                    '</el-form>',
                    '```'
                ].join("\n"),

                markdown_2 : [
                    '```javascript',
                    '//如果需要使用富文本框，需要引入该项，不使用无需引入',
                    "import E from 'wangeditor'",
                    '',
                    '//输入框验证规则代码',
                    'data(){',
                    '   return {',
                    '       rules : {',
                    '           name : [',
                    "               { required: true, message: '请输入姓名', trigger: 'blur' }",
                    '           ]',
                    '       }',
                    '   }',
                    '}',
                    '',
                    '//全局变量映射代码',
                    'computed: {',
                    '   ...mapState({ ',
                    '       form  : state => state.ModuleName.form',
                    '   })',
                    '}',
                    '',
                    'methods: {',
                    '',
                    '   //全局方法映射代码',
                    '   ...mapMutations(["ModuleName/clearForm"])',
                    '',
                    '   //表单提交代码',
                    '   submitForm(form){',
                    '',
                    '       this.$refs[form].validate((valid) => {',
                    '',
                    '           if (valid) {',
                    '',
                    '               //处理提交表单相关逻辑',
                    '',
                    '           }',
                    '',
                    '       }',
                    '',
                    '   },',
                    '',
                    '   //图片上传代码',
                    '   uploadImageChange(e){',
                    '',
                    '      //自建文件服务,EasyD文件服务',
                    '      var fileObj = e.target.files[0];',
                    '      this.$http.EasyD_uploadImageHttp(fileObj, {}, rs => {',
                    '         console.log(rs)',
                    '      }',
                    '',
                    '      //阿里云OSS文件服务',
                    '      var fileObj = e.target.files[0]',
                    '      this.$http.Aliyun_uploadImageHttp(fileObj ,rsUrl => {',
                    '         console.log(rs)',
                    '      })',
                    '',
                    '   },',
                    '',
                    '   //裁切回调函数',
                    '   cropperImageClick(){',  
                    '       var that = this',
                    '       this.$cropperImage({',
                    '           //裁切完成后回调函数',
                    '           cropperImageResult(file){',
                    '               //自建文件服务,EasyD文件服务',
                    '               that.$http.EasyD_uploadImageHttp(file, {}, rs => {',
                    '                   console.log(rs)',
                    '               })',
                    '               //阿里云OSS文件服务',
                    '               that.$http.Aliyun_uploadImageHttp(file ,rsUrl => {',
                    '                   console.log(rsUrl)',
                    '               })',
                    '           },',
                    '           //要裁切的图片',
                    '           imgUrl:""',
                    '       })',
                    '   }',
                    '',
                    '}',
                    '',
                    'mounted() {',
                        
                    '   //富文本初始化（如果需要使用富文本）',
                    '   this.editor = new E("#editorElement")',
                    '',
                    '   //获取富文本输入框内容',
                    '   this.editor.customConfig.onchange = (html) => {',
                    '       this.form.content = html',
                    '   }',
                    '',
                    '   //如果使用富文本图片上传按钮的监听回调',
                    '   this.editor.customConfig.customUploadImg = (files, insert) => {',
                    '',
                    '       //自建文件服务,EasyD文件服务',
                    '       var fileObj = files[0]',
                    '       this.$http.EasyD_uploadImageHttp(fileObj, {}, rs => {',
                    "           this.form.content = this.form.content + '<div><img src= + rs.result.url + /></div>'",
                    '           this.editor.txt.html(this.form.content)',
                    '       })',
                    '',
                    '       //阿里云OSS文件服务',
                    '       var fileObj = files[0]',
                    "       this.$http.Aliyun_uploadImageHttp(fileObj ,rs => {",
                    "           this.form.content = this.form.content + '<div><img src= + rs + /></div>'",
                    '           this.editor.txt.html(this.form.content)',
                    '       })',
                    '',
                    '   }',
                    '',
                    '   //使用富文本',
                    '   this.editor.create()',
                    '}',
                    '',
                    '```'
                ].join("\n")
                
            }
        },
        //初始化函数
        mounted() {
            var converter = new showdown.Converter();
            var htmlcontent_1  = converter.makeHtml(this.markdown_1);
            var htmlcontent_2  = converter.makeHtml(this.markdown_2);
            $("#markdown_1").html(htmlcontent_1);
            $("#markdown_2").html(htmlcontent_2);
            $('pre code').each(function(i, block) {
                hljs.highlightBlock(block);
            });
        },
        //计算属性
        computed: {
            // ...mapState({ })
        },
        //组件方法
        methods: {
            // ...mapMutations()
        }
    }
</script>

<style lang="stylus" scoped>
.sampleItem {
    width 100%
    height auto
    padding-left 5px
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;

    .sampleTitleBox {
        width 100%
        margin-top 20px
        height auto
    }

    .sampleTitle {
        width auto
        font-size 16px
        font-weight bold

        i {
            font-size 12px
            color orange
            margin-right 5px
            position relative
            top -2px
        }
    }

    .sampleContentBox {
        width 100%
        height auto
        margin-top 10px

        
        .sampleContent {
            width 100%
            background #f5f5f5
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -o-box-sizing: border-box;
            -ms-box-sizing: border-box;
            padding 10px
            border-radius 5px

        }
    }

}
</style>